I have an extract html file from a comment system I have to use that looks like this:
<div>Plz say my name😄✌🏻</div>
<div>Dose Amelia like donuts 🍩🍩</div>
Obviously the part to note is all the emoji. I then pull that HTML file in using
var questionsfile = "comments.inc";
$.get(questionsfile, function(response) {
$(".noquestions").replaceWith(response);
});
I used .replace() to convert it back to ✌ but it now just outputs it as plain text. How do I make it so that the response output contains ✌🍩?
You need to replace its text as its html, check the demo below
var str = `<div>Plz say my name😄✌🏻</div>
<div>Dose Amelia like donuts 🍩🍩</div>`;
var $str = $( str );
$str.find( "div" ).each( function(){ //iterate each div
$(this).text( $(this).html() ); //replace text with html
})
$(".noquestions").replaceWith( $str );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noquestions-wrapper">
<div class="noquestions">
assasd
</div>
</div>
Related
The code below works very fine and replaces certain variables in the div. Eg food is replaced by bolded food is ready etc.
<script>
$(document).ready(function(){
$('div').html( $('div').html().replace(/food/g, '<strong>food is ready</strong>') );
$('div').html( $('div').html().replace(/meat/g, '<strong>good meat</strong>') );
$('div').html( $('div').html().replace(/milk/g, '<strong>best milk</strong>') );
});
</script>
<div> hello do you have food, what about meat. I will also need milk. and please make them bold.</div>
Here is my issue: I want to implement the same functionality above using inputted data from form variables. Eg. I want if type certain words and it contains food, milk etc. let them be replaced with their bolded equivalents in the sentence as I type. I have tried the code below but cannot get it to work.
<script>
$(document).ready(function(){
$('.message').keyup(function(){
var message = $('.message').val();
$('.result').html( $('.message').html().replace(/food/g, '<strong>food is ready</strong>') );
$('.result').html( $('.message').html().replace(/meat/g, '<strong>good meat</strong>') );
$('.result').html( $('.message').html().replace(/milk/g, '<strong>best milk</strong>') );
});
});
</script>
<input type='text' id='message' class='message'>
//Display all the typed sentence and replace their matched word with their bolded equivalents
<div class="result"></div>
</script>
I didn't test the following code but it should work fine.
<script>
$(document).ready(function(){
$('.message').keyup(function(){
var message = $('.message').val();
var output = message.replace(/food/g, '<strong>food is ready</strong>').replace(/meat/g, '<strong>good meat</strong>').replace(/milk/g, '<strong>best milk</strong>'); //chained replace()
$('.result').html( output );
});
});
</script>
<input type='text' id='message' class='message'>
//Display all the typed sentence and replace their matched word with their bolded equivalents
<div class="result"></div>
</script>
The two problems were:
using unchained replacing functions when setting the output value, causing overriding old rules
using $('.message').html() instead of message
I'm trying to build a function, that receives a string with this format:
"hello wor**"
The * could be anywhere on the string.
It should return:
<span>hello wor</span><input type='text'></input>
So the string could be "hel** wor*d" also
and the return should be:
<span>hel</span><input type='text'> <span>wor</span><input type='text'><span>d</span>
I could do it easily with a loop on each char, but I'm looking for more elegant solutions.
I think that it could be solved with a regex, and using replace I got the "*" covered:
var text = "hello wor**";
text.replace(/\*+/g, "<input type='text'></input>");
I have not yet found a way of capturing the remaining text to render the
<span>
You're not using the result of the replace function. Try this:
var text = "*hel** wor*d*";
var element = text.split(/\s*\*+\s*/g);
element = "<span>"+ element.join("</span><input type='text'><span>") + "</span>";
element = element.replace(/<span><\/span>/g, "");
console.log(element);
'hello wor**'.replace(/\*+/g, "<input type='text'></input>");
This returns hello wor. All you have to do is concatenate the string with the rest of the data you want, like so:
var text = "hello wor**";
text = '<span>' + text.replace(/\*+/g, '') + '</span><input type=\'text\'></input>';
<html>
<head>
</head>
<body>
<span id="hi">hello wor**</span>
</body>
</html>
i use jquery in this
$( document ).ready(function() {
var texty = $('#hi').text();
$('#hi').replaceWith(texty.replace(/\*+/g, "<input type='text'></input>"))
});
I want to replace spaces between html tags with nbsps using pure JavaScript.
This is my html:
<div><span>Apple</span> <span>Grapes</span></div>
You can see spaces between 2 span nodes. These spaces should be replaced by  s.
Result should be:
<div><span>Apple</span><span> </span><span>Grapes</span></div>
Please help me.
Try this simple logic
var input= "<div><span>Apple</span> <span>Grapes</span></div>"
var output = input.replace( /<\/span>\s*<span>/g, function(match){ return match.replace(/\s/g, " ") } );
console.log( output );
new to this javascript thing. This is driving me crazy!
How do I add a URL in a string variable?
This is what I have:
function getRiskMessage(){
var msg = " visit our advice website at <a href=\'http://www.example.com\'>this site</a>";
if(totalRiskScore > 25){
//this message (High Risk)
msg2 = show();
}//close if
return msg;
}
but when i output it to a div instead of a link 'this link' - I get the a tag and url as string like above.
What am I doing wrong, need to understand this.
tl;dr You're using createTextNode, which creates a plain-text node. Don't do that :) Use the innerHTML property instead. See below for more details.
You don't need to escape quotes unless they resemble the start and end quotes:
var foo = "Visit <a href='http://bing.com'>Bing</a>.";
In the above, the string begins and ends with double-quotes, so single-quotes can be used without any problems.
var foo = "Visit Bing.";
In the above, we use double-quotes around the string, and around the [href] attribute. As a result, the inner-quotes (around the attribute) must be escaped so they don't confuse the parser.
Lastly, when you output, make sure to output as HTML:
div.textContent = foo; // Represents foo as plain text
div.innerHTML = foo; // Interprets foo as HTML
div.appendChild( document.createTextNode( foo ) ); // Similar to textContent
div.appendChild( document.createElement( "span" ) ).innerHTML = foo; // HTML
Example:
document.querySelector( ".msg" ).innerHTML = "Visit <a href='http://bing.com'>Bing</a>.";
<div class="msg"></div>
This is a basic example on how to insert html using plain javascript:
document.getElementById('your-div').innerHTML = msg
Here is a fiddle of your case: demo
Thy this:
var msg = document.createElement('span');
msg.innerHTML = " visit our advice website at <a href=\'http://www.example.com\'>this site</a>"
container.appendChild(msg);
Working demo: FIDDLE
How to find and replace begin tag and end tags in an html string using javascript/jquery
for example
var myString = "<span> Hello john</span><div> John likes to play guitar </div> <div style="color:Blue;font-weight:bold" class='quotes'>Anna likes to arrange flowers
</div>";
I need to find the "div" tag and replace with other html tag like "p" tag/ "span" tag
Resulting html string after replace "div" tag to "p" tag
var replacestring="<span> Hello john</span><p> John likes to play guitar </p> <p style="color:Blue;font-weight:bold" class='quotes'>Anna likes to arrange flowers
</p>";
Please suggest any solution.
Javascript with regular expression:
myString = myString.replace(/<(\/)?div[^>]*>/g, '<$1p>');
Also see my jsfiddle.
=== UPDATE ===
myString = myString.replace(/<(\/)?div([^>]*)>/g, '<$1p$2>');
jsfiddle 2.
myString = $('<div />').html(myString).find('div').replaceWith(function() {
var p = $('<p />');
p.html($(this).html());
$.each(this.attributes, function(index, attr) {
p.attr(attr.name, attr.value);
});
return p;
}).end().html();
jsFiddle.
Trying something with jQuery, however, I am not sure if it is any better than what alex suggested.
var $replaceString=$(replaceString);
$("div",$replaceString).each(
function()
{
var $p=$(document.createElement('p')).html($(this).html());
//add code to add any attribute that you want to be copied over.
$(this).after($p);
$(this).remove();
}
);