Develop Reference

How to wrap with <p> in first line of contenteditable div

I used below code to wrap <p> instead of <div>.
document.execCommand('defaultParagraphSeparator', false, 'p')
But I still can't wrap first line, like this "aaa".
<div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
Does anyone know how to wrap first line "aaa" with <p>?
postscript
I changed my cord using one of the answer for reference.
But now I cant type any letter. Only if I press enter first, it works. But after I press enter and make <p>, I cant type any letter again.
Where is the problem?
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents' onkeydown={firstLine}></div>
<script>
firstLine(e) {
if(e.keyCode == '13') {
var div = document.getElementById('body-text')
var text = div.firstChild.textContents
div.removeChild(div.firstChild)
var p = document.createElement('p')
p.textContent = text
div.insertBefore(p, div.firstChild)
}
}
</script>

I'm using element.firstChild to select the "aaa" textNode, and creating the paragraph element which then gets prepended back into .body-text.
var pElement = document.createElement('p');
var bodyText = document.querySelector('.body-text');
var firstLine = bodyText.firstChild;
pElement.appendChild(firstLine);
bodyText.prepend(pElement);
console.log(bodyText.outerHTML)
<div class="body-text" contenteditable="true" data-placeholder="Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
note: you don't need a class and an ID... choose one

Ok, first I have to let you know that the code you provided was using those fancy quotes “ and ” you must use either this " or this '. Having said that, I have made a Snippet that uses formatBlock.
Highlight the text and click the button <p/>.
It can wrap text in a <p>, <div>, <blockquote>, <h1>, etc..
SNIPPET
<div id="body-text" class="body-text" contenteditable="true" data-placeholder="Body Contents">
aaa
<p>bbb</p>
<p>ccc</p>
</div>
<input type="button" class="p" onclick="document.execCommand('formatBlock', false, 'p')" value="<p/>" title="Insert a Paragraph Wrapped on Highlighted Text">

One way to do it is to get first text node of your div, save the text, remove that node and then create a p tag with the text from your ancient node and insert it in your div.
UPDATED
you had a little typpo problem var text = div.firstChild.textContents, there is no s it only var text = div.firstChild.textContent
see fiddle: https://jsfiddle.net/2rgLzkyj/
HTML :
<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'>
aaa
<p>bbb</p>
</div>
Javascript:
var div = document.getElementById('body-text')
div.addEventListener('keydown', onKeyDown);
function onKeyDown(e) {
if (e.keyCode == '13') {
var text = div.firstChild.textContent;
div.removeChild(div.firstChild);
var p = document.createElement('p');
p.textContent = text;
div.insertBefore(p, div.firstChild);
}
}

Reading Text Between Tags

I am trying to parse some poorly written HTML that follow the below structure.
<div>
<span>stuff</span>
Lets just put text here
<span>more stuff</span>
And here too!!!
<span id="cool">even more stuff</span>
</div>
Essentially, text is between pairs of tags. I am trying to ONLY get the "Lets just put text here" and "And here too!!!" text with JavaScript. Suggestions?
Thanks.

I would use convenient array methods: Array.prototype.filter - to get text nodes only, and Array.prototype.map to get text values from those nodes:
var div = document.querySelector('div');
var textNodes = [].slice.call(div.childNodes).filter(function(el) {
return el.nodeType === 3 && el.nodeValue.trim();
});
var text = textNodes.map(function(node) {
return node.nodeValue.trim();
});
alert("Text #1: " + text[0] + "\nText #2: " + text[1]);
<div>
<span>stuff</span>
Lets just put text here
<span>more stuff</span>
And here too!!!
<span id="cool">even more stuff</span>
</div>

Get text of div

I want to get the text of the next id (the text is: "Show More").
<div id="show_more_less" onclick="Show_More_Less();">Show more</p>
function Show_More_Less() {
var str = document.getElementById('show_more_less').text;
}
I tried: .value but it doesn't work.

To get the text of an element in a cross browser way, you can do this :
var e = document.getElementById('show_more_less');
var text = e.textContent || e.innerText;

Try innerHTML:
var str = document.getElementById('show_more_less').innerHTML;
Also you have an opening <div> tag and a closing </p> tag which is inconsistent. You probably meant:
<div id="show_more_less" onclick="Show_More_Less();">Show more</div>

Should make some checks to see if childNodes[0] exists and if it's a text node, but basically:
var str = document.getElementById('show_more_less').childNodes[0].nodeValue;

jQuery find and replace string

I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
search for the string
find the closest parent element
rewrite only the closest parent element
replace this even in attributes, but not all, for example replace it in class, but not in src
In example, I would have structure like this
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="... would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?

You could do something like this:
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
It will be better to mark all tags with text that needs to be examined with a suitable class name.
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.

You could do something this way:
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
example: http://jsfiddle.net/steweb/MhQZD/

You could do something like this:
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});

Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTML tag. It works for each words in that class tags.
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.
HTML:
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
$(document).ready(function() {
$('.swapText').text("marshmallows");
});

Replace node with innerhtml

With JavaScript I want to remove a specific DOM node and replace it with the innerHTML. For example I want to change
<div>
...
<div id="t1">
this is <b> the text </b> I want to remain.
</div>
...
</div>
To
<div>
...
this is <b> the text </b> I want to remain.
...
</div>

Try this:
var oldElem = document.getElementById('t1');
oldElem.innerHTML = 'this is <b> the text </b> I want to remain.';
var parentElem = oldElem.parentNode;
var innerElem;
while (innerElem = oldElem.firstChild)
{
// insert all our children before ourselves.
parentElem.insertBefore(innerElem, oldElem);
}
parentElem.removeChild(oldElem);
There is a demo here.
This is effectively the same thing as .replaceWith() from jQuery:
$("#t1").replaceWith('this is <b> the text </b> I want to remain.');

var t1 = document.getElementById("t1");
t1.outerHTML = "this is <b> the text </b> I want to remain.";
http://youmightnotneedjquery.com/#replace_from_html

If you are using jQuery, you can try
var inner = j$("#t1").html()
$('#t1').replaceWith(inner);

This works:
var t1 = document.getElementById("t1");
t1.parentNode.innerHTML = t1.innerHTML;
Edit:
Please note that if the parent of t1 has any other children, the above will remove all those children too. The following fixes this problem:
var t1 = document.getElementById("t1");
var children = t1.childNodes;
for (var i = 0; i < children.length; i++) {
t1.parentNode.insertBefore(children[i].cloneNode(true), t1);
}
t1.parentNode.removeChild(t1);

It's very easy actually:
let span = document.getElementById('id');
span.outerHTML = span.innerHTML;

I just modified the HTML Like this.
<div>
<div id="t0">
<div id="t1">
this is <b> the text </b> I want to remain.
</div>
</div>
</div>
And you do something like
document.getElementById("t0").innerHTML = "this is <b> the text </b> I want to remain.";
Hope it works

you might want to consider using jquery if that's possible.
it would make your life way way wayyyyyyyy easier.
once you have jquery, you can easily do this via
$("#t1").html("this is <b> the text </b> I want to remain.");
and if you find it a hassle to learn, you can always start by learning the jquery selectors.
you wouldn't know why you haven't been using it all this while :)
sorry if this is not what you want exactly..
~jquery addict
Updated:
To show what html text to put inside.

This is similar to the other answers but more functional.
go.onclick = () => {
[...t1.childNodes].forEach(e => {
t1.parentElement.insertBefore(e, t1);
});
t1.remove();
go.disabled = true;
}
#t1 {
color: red;
}
<div>
<div>BEFORE</div>
<div id="t1">
this is <b> the text </b> I want to remain.
</div>
<div>AFTER</div>
<button id="go">GO</button>
</div>