Develop Reference

Converting some text within an element to an element itself using JavaScript

Is this possible using JavaScript or JQuery, or anything else?
Say I have an HTML file like this
<div>
<p>Hello World</p>
</div>
And I want to turn "World" into a span element itself, like so (so that I can style just "World")
<div>
<p>Hello <span>World</span></p>
</div>

Since there are a lot of unknowns in your question, so I am assuming that you already know the string/word around which you want to add the html tag.
So keeping that in mind, following solution should work:
HTML:
<div>
<p id="my-text">Hello World, Again!</p>
</div>
JavaScript:
const stringToBeReplaced = "World"; // what you want to replace
const innerText = document.getElementById("my-text").innerText; //grab the text
const beginIndex = innerText.indexOf(stringToBeReplaced); // get text where string begins
// if string exists
if (beginIndex >= 0) {
const textWithTag =
"<span style='color: red'>" + stringToBeReplaced + "</span>";
const newString = innerText.replace(stringToBeReplaced, textWithTag);
// replace the text with new string
document.getElementById("my-text").innerHTML = newString;
}
Hope this is what you were asking and looking for.

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_replace3
str.replace solves the job. The comment of #Umer Hassan is correct.

Combined two HTML data value with Regex

I am trying to merege two HTML data into one HTML tag. I am trying to do it with regex.
The HTML is look like this
var temp = document.getElementById('data').innerHTML;
console.log(temp);
<div id="data">
<strong>20 </strong>
<strong>0 </strong>
<strong>0 /-</strong>
</div>
My expexted output is <strong>2000/-</strong>

// you should get the textContent instead of the innerHTML
var temp = document.getElementById('data').textContent;
// removes all spaces and
// surrounds the output with the <strong> element
var newhtml = `<strong>${ temp.replace(/\s/g,'') }</strong>`;
// replaces the innerHTML of the data with newhtml
document.getElementById('data').innerHTML = newhtml
<div id="data">
<strong>20 </strong>
<strong>0 </strong>
<strong>0 /-</strong>
</div>

You do not need regex for this you could simply concat the strings with
str.concat(string2, string3, string4, etc)
and giving all the strong tags an individual ID
However, if the content is dynamic and not hard coded in, you could loop through the child nodes of document.getElementById('data') and get the textContent of each of the child nodes and concat them that way.

How to ignore HTML tags in innerHTML attribute?

I'm making a messenger and my messages don't ignore HTML tags because I simply past a text from input in innerHTML of message. My code:
function Message(sender) {
...
this["text"] = "";
...
this.addText = function (text) {
this["text"] = text;
};
...
};
And here I display it:
...
var chatMessageText = document.createElement("p");
chatMessageText.innerHTML = message["text"];
...
What can I do for ignoring HTML tags in message["text"]?

Update Node#innerText property(or Node#textContent property).
chatMessageText.innerText = message["text"];
Check the difference of both here : innerText vs textContent
Refer : Difference between text content vs inner text

You can't. The point of innerHTML is that you give it HTML and it interprets it as HTML.
You could escape all the special characters, but the easier solution is to not use innerHTML.
var chatMessagePara = document.createElement("p");
var chatMessageText = document.createTextNode(message["text"]);
chatMessagePara.appendChild(chatMessageText)

How to get Html Element's Text

I want to extract the text part of the html.
If I have <p>ABCD</p>
I want the out put to be ABCD
Something like,
var html='<p>ABCD</p>';
var str = convertToString(html);
Hope, I will need a function which converts from html to string, or maybe extract string from it.

You can use jQuery to extract the text content from the string
var html = '<p>ABCD</p>';
var str = $(html).text();//get a jQuery reference and then read its text content
console.log(str)

All you need is a selector(id,class name etc) of get the required element of DOM and use .text() to get text part of the html.
HTML
<p>ABCD</p>
Jquery
var str = $('p').text(); // $('p') "p" is a selector to select p element(s)
console.log(str)
DEMO

JavaScript way
var txt = document.getElementById("demo").innerHTML;
alert(txt);
<p id="demo">Test text</p>

var html = '<p>ABCD</p>';
var str = $(html).text();
console.log(str);
This would do the task.

Adding bold tags to a string of html

I have a string of html in javascript/jquery.
var str = '<div id="cheese" class="appleSauce"> I like apple and cheese</div>';
I want to make the string 'apple' bold. So I do:
str = str.replace('apple','<b>apple</b>');
but this breaks the html part of the string. I get:
<div id="cheese" class="<b>apple</b>Sauce"> I like <b>apple</b> and cheese</div>
How can I replace all occurrences of a string in the text of an html string without changing the matches inside of html markup?

var e = $('#cheese');
e.html(e.text().replace('apple','<b>apple</b>'));
Working Fiddle

Create an element, jQuery element in this case, and set the innerHTML property:
var el = $('<div id="cheese" class="appleSauce"> I like apple and cheese</div>');
el.html(el.html().replace('apple','<b>apple</b>'));

You can do it like that
var str=str.replace(new RegExp(/(apple)$/),"<b>apple</b>");