Develop Reference

Change the error message in a SPAN using JavaScript/jQuery

I want to change the message in a <span> using JavaScript/jQuery.
<span id="access-code-error" class="rsvp required-fields"> </span>
I am using the following code to replace the text which will be added to this <span>:
$("span:contains('I need <br>this text to be replaced')").text( "hello<br> How r u" );
But this isn't working. What do I need to do differently?

You can use the jQuery text() method like below:
$("#access-code-error").text("Your message");

Working fiddle:
https://jsfiddle.net/6wcpLpbw/
Using a html tag inside a :contains will not work properly.
.text() should be used only with plain text not with html tags inside it.
You should use .html() instead of .text().
Try something like this:
$("span:contains('I need this text to be replaced')").html("hello<br> How r u");
Note: ID should be used only once in a page.

To change the error message of your access-code-error span, you can do the following:
JavaScript:
var errormsg = document.getElementById("access-code-error");
errormsg.innerHTML = "hello<br> How r u";
jQuery:
1) You can use the html() method as shown:
$("#access-code-error").html("hello<br/> How r u");
2) You can also use the text() method in a similar way:
$("#access-code-error").text("hello<\br/> How r u");

This first html('') will remove current text from the span and the other one will add the text you want.
:)
$('#access-code-error').html('').html('hello<br> How r u');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="access-code-error" class="rsvp required-fields">This need to be Replaced </span>

Since you have provided the id of the span, you can use that as shown:
$("#access-code-error").text("Your message");

js regex: replace a word not follows or not followed by a certain word

I want to replace the "word" that is outside "span", and keep the other that is inside "span". By now, the following code works when both are following "mark>" and followed by "span". But I want to go further, following "mark>" OR being followed by "span", any one of the two condition should cause replacing action.
var replaceString = "newWord";
var htmlString = "This <span style='color:red' title='mark'>normal word</span> need no change. This word is to be replaced. <span>Another word</span> need no change.";
var reg=new RegExp("(?!mark>)"+replaceString+"(?!<\/span>)","gi");
var bb=htmlString.replace(reg,replaceString);
alert(bb)
// Final result should be "This <span style='color:red' title='mark'>normal word</span> need no change. This newWord is to be replaced. <span>Another word</span> need no change.";
UPDATE: using title as mark. adding starting tag span
UPDATE: Follow the suggestion below, I'm trying to solve the problem in anohter way, see here: js regex: replace words not in a span tag

Would you be comfortable using another span tag ?
By putting a class name inside it, you should be able to change the words you need to change by changing the content of every span containing that class.
Something like :
This <span style='color:red' mark>word</span> need no change. This <span class='changeMe'>word</span> is to be replaced. Another word</span> need no change.
And a jQuery script going
$('.changeMe').text("newWord")
If you still want to use Regexp, for an OR condition, you might just do it twice :
var reg=new RegExp("(?!mark>)"+replaceString,"gi");
var bb=htmlString.replace(reg,replaceString);
reg=new RegExp(replaceString+"(?!<\/span>)","gi");
bb=htmlString.replace(reg,replaceString);

You are looking for negative look-aheads (or Lookbehinds) which JS, unfortunately, doesn't support. Check http://www.regular-expressions.info/javascript.html
You may try the following Regex:
var reg = new RegExp('[^(mark>)]word[^(</span>)]', "gi")
htmlString.replace(reg, " newWord "); //Check the spaces
I would rather suggest using JS to get DOM elements and replace text iterative-lly (not sure if it's a word, even a jargon).
HTH

jQuery Getting SPAN value with a specific Class name

Alright. I've span elements like below in my page.
<span class="Jens">Bill Gates</span>
<span class="noJens">Martin Reid</span>
<span class="Jens">Jeff Bezos</span>
<span class="Jens">Mark Zuckerberg</span>
<span class="noJens">Nameless Dude</span>
<span class="Jens">Jack Ma</span>
<span class="Jens">Larry Ellison</span>
I wanted to get all span values with the class name as Jens & need to separate the values with some space or break.
I managed to get the values by giving the following code. But how to separate each entry with a space or a break?
$("span[class='Jens']").text(); //Outputs Bill GatesJeff BezosMark ZuckerbergJack MaLarry Ellison
I can achieve desired output by iterating over each elements. But Is there a way I can separate each entry with a space or \n in a single statement like above?

You can get them comma seprated using:
$('.Jens').map(function() { return $(this).text(); }).get().join();
Working Demo
For joining them with \n pass parameter \n in join method:
Syntax for join: array.join(separator)
$('.Jens').map(function() { return $(this).text(); }).get().join("\n")
Working Demo with \n

Javascript to replace a string inside a tag

<nav class="woocommerce-breadcrumb">Home > Product</nav>
Using jQuery or Javascript how would I be able to rename the word 'Product' to some other value?
var brandname = $('.tax-product_brand h1.page-title').text();
var crumb = $('.woocommerce-breadcrumb').text();
console.log(crumb);
crumb.replace("Product", brandname);
I tried the above with no luck

Use .html() rather than .text() or else you'll lose your markup:
var crumb = $('.woocommerce-breadcrumb').html();
Then apply the value back to the element:
$('.woocommerce-breadcrumb').html(crumb.replace("Product", brandname));
Alternatively, a much easier way would be to put "Product" in its own element, and then just replace that element's text:
<nav class="woocommerce-breadcrumb">Home > <span class="item">Product</span></nav>
Then your jQuery would simply be:
$(".woocommerce-breadcrumb .item").text(brandname);

You then need to insert your string into the DOM. As it is, you're just doing a string operation and discarding the return value.
$('.woocommerce-breadcrumb').text(crumb.replace("Product", brandname));
EDIT: As mentioned in a comment, you should use .html() instead of .text(). .text() will strip all of your HTML, i.e. your <a> tag.

.replace returns a new string, so you have to set the text of crumb with the returned string.

Its replaced Here is demo.
var brandname = 'My Name';
var crumb = 'My Product';
console.log(crumb);
var d= crumb.replace("Product", brandname);
alert(d);

var brandname = $('.tax-product_brand h1.page-title').text();
$(".woocommerce-breadcrumb:contains('Product')").html(function(_, html) {
return html.replace(/(Product)/g, '<span>'+brandname+'</span>')
});
I was able to use the above to gain what I wanted whilst keeping the formatting of the a tag

Avoid using free text. This will increase processing overhead, when you'll do DOM calculations.
It is good, if you can use tag to display the end product/page name.
The html will look like:
<nav class="woocommerce-breadcrumb">
<a href="http://domain.com/" class="home">
Home
</a>
<span class="currentPage">>Product</span>
</nav>
Now, you can use simple DOM operation to change the text() of expected element.
var currentPage=$(".currentPage");
$(currentPage).text('> NewText');

Why JavaScript converts my < into >

JavaScript converts my < into >. I want to alert it but my message is with encoded marks like ##&*()}{>?>? - how to display it normally but prevent from executing as HTML code?
<span id="ID" onClick="alertIt(this.id);">
<p>Some string with special chars: ~!##&*()}{>?>?>|{">##$#^#$</p>
<p>Why when clicked it gives something like this:</p>
<p>'<br>
Some string with special chars: ~!##&*()}{>?>?>|... and so on
<br>'</p>
</span>
<script type="text/javascript">
function alertIt(ID)
{
var ID = ID;
var content = document.getElementById(ID).innerHTML;
alert(content);
}
</script>

Use innerText instead of innerHTML. http://jsfiddle.net/WVf95/

Your problem is that you use the wrong approach to get the text to display with alert().
Some characters are illegal in HTML text (they are used for HTML tags and entities). innerHTML will make sure that text is properly escaped (i.e. you can see tags and escaped text).
If you want to see tag and text in alert(), there is no solution.
If you want only the text, then you will have to extract it yourself. There is no built-in support for that. It's also not really trivial to implement. I suggest to include jQuery in your page; then you can get the text with:
function alertIt(ID) {
alert($(ID).text());
}

Using textContent instaed of innerHTML or innerText is a solution.