Develop Reference

Changing HTML with spans and symbols in Javascript [duplicate]

This question already has answers here:
Double quote in JavaScript string
(4 answers)
Escape quotes in JavaScript
(13 answers)
Closed 1 year ago.
I have some HTML and when a function is called, I want to change to text in a div that uses span. The idea is to be a sort of customized alert. I'm trying to use .innerHTML, but what I want to change has both quotations and span. Is there a way that I can get this to update?
Current HTML:
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
This shows a box with a picture and
"I need to update this code and keep the quotations and the
keywords!"
The current javascript that I have is:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = ""This <span class="keyWord">code</span> needs to change!"";
It won't allow me to add the extra quotations or the span element.
The resulting text should be
"This code needs to change!"

Method 1 - Backslash escape
Escape the double quotes within your HTML string with the backslash \ character:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
Further reading: String - JavaScript | MDN#Escape Notation
Method 2 - Using template strings
Declare your string as a template literal by encapsulating it in backtick characters:
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = `"This <span class="keyWord">code</span> needs to change!"`;
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>
Further reading: Template literals (Template strings) - JavaScript | MDN
Method 3 - Single quote (') encapsulation
In this specific case, since you haven't used single quotes anywhere in your string, you can simply declare the HTML string by encapsulating it in single quote characters. Be forewarned that this will break if for whatever reason your text changes to include a single quote, which would then force you to escape them as detailed in Method 1.
alertChange = document.getElementById("messageArea");
alertChange.innerHTML = '"This <span class="keyWord">code</span> needs to change!"';
<div id="messageBox" class="messageBox">
<div id="picture"></div>
<div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the
quotations and keywords!"
</div>
</div>

You need to use the Backslash \ to "escape" the special character (in your case the double quote symbol) like this
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";

How to replace HTML compoment only use Regular Expression

I am currently working on some server side code to parse HTML. I have following html string:
<div class="rte-style-maintainer rte-pre-wrap" style="white-space: pre-wrap; font-size: small; >This is a test for link {<a spellcheck="false" destination="rte:bind" data-destination="rte:bind">ABCD 156782053 </a>}</div>
And want to replace the content inside the bracket {} with
<a href="ABCD 156782053">ABCD 156782053 </a>
I am new to the regular expression. How can I get the "ABCD 156782053" from the bracket using regular expression? And replace the content inside bracket with new value?
Thanks

First of all, your HTML syntax is wrong. Some closing quotes are missing.
Anyway, the syntax of this expression is that:
/{(.*?)}/g
Here is the test link: https://regexr.com/542vj

Jquery append data attribute value dynamically using html

I am using jquery sortable library where i will drop item from one list to another.In the process of dropping item i will change html content.I have data attribute also.
onAdd: function (evt) {
var df="hm "+evt.item.innerText;
alert(df);
var content='<div class="list-group-item " >'+evt.item.innerText+' its modified <span class="badge badge-primary badge-pill float-right" data-job='+df+'>14</span></div>';
$(evt.item).replaceWith(content);
},
in alert i get correct appended value but in data-job it will set only hm and evt.item.innerText will not append
Can any one help me to append it properly.
Thank you

You are missing quotes in the expression
Use below code
data-job="'+df+'"

Since you have space between the text, the text after the space is treated as another attribute of the element. You should wrap the text with quotes data-job="'+df+'".
Though I prefer using Template literals which is more cleaner and easier to use:
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.
Demo:
function test(evt) {
var df="hm "+evt.target.innerText;
var content=`<div class="list-group-item">evt.target.innerText its modified <span class="badge badge-primary badge-pill float-right" data-job='${df}'>14</span></div>`;
console.log(df);
console.log(content);
$('body').append(content);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div onclick="test(event)">test</div>

Javascript: Regex of a HTML h4 tag

i have a variable "html" with an HTML code.
I need to extract:
<h4 class="search-results-count">ANY TEXT THAT GOES HERE</h4>
but i can't figure how to do that with regex or another tecnique

You can extract the innerHTML like
document.querySelector('.search-results-count').innerHTML

You should not parse html with regex
You can use the following regex: (not recommended)
<h4[^>]*>([^<]*)<\/h4>
And extract group 1.. $1
See demo

Passing variable with single quote in javascript

I have an onClick call on a link:
<a onClick="fomateName('Andrew Dsouza')"> //this is working good
The problem is the variable inside fomateName would contain single quotes and my fomateName Takes a variable like
var a='Andrew D'souza'. Need to format a variable present with single quote Ex;
<a onClick="fomateName('a')"> which turns to
<a onClick="fomateName('Andrew D'souza')"> //this is not working ,because present of single quote
Any Idea how to pass text with proper quotes in a javascript.
with single quote not the name actually

Try:
<a onClick="fomateName('Andrew D\'souza')"> <!-- this will work -->
\ use backslashes to escape '
Lets say if you have function like this =>
function fomateName(txt){
alert(txt);
}
and invoking it from anchor =>
<a onClick="fomateName('Andrew D\'souza')"> <!-- this will alert "Andrew D'souza" -->

Escape the quote with backslashes.
<a onClick="fomateName('Andrew D\'souza')">
//this is not working ,because present of single quote

You can wrap it in double quotes like so:
<a onClick="fomateName("Andrew D'souza")"> //this is not working ,because present of single quote
Never mind, just realized it already has double quotes, yeah use backslash for escape like so:
<a onClick="fomateName('Andrew D\'souza')">

Try this. Use backslash - It will escape the quote breaks
<a onClick="fomateName('Andrew D\'souza')">

You can use escape character
<a onclick="formateName('AdrewD\'souza')">

You can escape the quote with a backslash..
fomateName('Andrew D\'souza');
This should work anyway:
var name = "Andrew D'souza";
fomateName(name);