I have the following Problem:
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
How can i change or manipulate the Text after the break-Tag ?
I cant change the HTML itself and it has to be done via JavaScript containing jQuery.
After manipulating it should look like this:
<h1 id="title">Text Text Text <br> <span id="preTitle"> blablabla </span></h1>
Anybody got a solution to this? Thanks in advance
Take the initial html inside h1 tag. Split it by br tag. Adjust the second part of splited html with span tag. Join splited parts with br tag and put them back into h1 tag:
var html = $("#title").html();
var parts = html.split("<br>");
parts[1] = "<span class='preTitle'>"+parts[1]+"</span>";
$("#title").html(parts.join("<br>"));
.preTitle{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="title">Text Text Text <br> Second Text Text Text </h1>
You can use JQuery:
var titleHtml = $("#title").html().split('<br>');
$("#title").html(titleHtml[0]+"<br><span id='preTitle'>"+titleHtml[1]+"</span>");
Related
I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>
The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:
var x = document.getElementById("sampleeditor").value;
console.log(x);
It`s just loging - undefined, so how to target whatever is inside that div?
Divs do not have value properties, you have to use inner html
var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);
this is my solution
var x = document.getElementById("sampleeditor").innerText;
console.log(x);
let x = document.querySelector(".editor");
console.log(x.textContent);
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div>
<b>
<i>ITALIC</i>
</b>
</div>
</div>
I am having trouble with some code for a chrome extension. The code is supposed to replace a word with another one. It does this, however, I would only like it to replace a word if it is within certain tags such as <p></p> or header tags. At the moment it replaces all the words in the HTML file within the <body></body>. This sometimes interferes with the HTML code and can break certain features of a website. Here's what I have currently.
document.body.innerHTML = document.body.innerHTML.replace(newRegExp("old", "g"), "new");
Thank you for the help!
So just loop over all the elements that you care about and do the replacement on those elements only.
// Get all the elements that you care about into an array
let elements = Array.prototype.slice.call(document.querySelectorAll("p, header"));
// Loop over the items in the array
elements.forEach(function(el){
// Do the replace on the element
el.textContent = el.textContent.replace(/text/g, "letters");
});
<header>This is some text in a header</header>
<h1>This is some text in an h1</h1>
<div>This is some text in a div</div>
<p>This is some text in a p</p>
<div>This is some text in a div</div>
<div>This is some text in a div
<p>This text is inside of a p with lots of text</p>
</div>
I have this code:
<textarea name="TT_board_announcements_content_insert" value="{TT_board_announcements_content_insert}">{TT_board_announcements_content_insert}</textarea>
<div id="board-announcements">
<!-- IF TT_board_announcements_content_insert -->
{TT_board_announcements_content_insert}
<!-- ENDIF -->
</div>
So my problem is when I insert content with html tags through textarea, after I save it. Div id board-announcements shows the content in same way as it is entered in textarea field. In other words it does not recognize html tags.
So it is displayed as this:
So I use this jquery simple code:
$('#board-announcements').html($('#board-announcements').text());
and with this code works.
But my question is: how to resolve it without using jQuery ?
I did tried with tinymce, but again when I save, div id board-announcements does not recognize html tags... it shows it as plain text.
<div name="TT_board_announcements_content_insert" value="{TT_board_announcements_content_insert}" contenteditable="true">{TT_board_announcements_content_insert}</div>
It's not a textarea, but this is a content editable div, which you can use for the same purpose.
Try to use innerHTML and document.getElementById, no JQuery needed.
function insertContent() {
var content = document.getElementById('content');
var text = document.getElementById('text');
content.innerHTML = text.value;
}
<textarea id="text"><h1>Hi</h1></textarea>
<div id="content"></div>
<button onclick="insertContent()">insert content</button>
I have to replace some characters in all a div, but when I run the code, the function replaces me also the html tags characters
my code is:
$("#main").children().each(function() {
$(this).html($(this).html().replace(/s/g, "K"));
})
<div id="main">
<p>Some contents that will be replaced... <span>this will not be in a span tag :(</span></p>
</div>
result:
<div id="main">
<p>Kome contentK that will be replaced... <Kpan>this will not be in a Kpan tag :(</Kpan></p>
</div>
If your goal is to preserve all the markup within the div but replace text within all those tags, that's difficult. You need to find just the text nodes and no other nodes and do the replacement within each of the text nodes individually.
This question may help: How do I select text nodes with jQuery?
I have a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>