We Keep Coding

JavaScript: Code says "cannot read property 'indexOf' of undefined" but I can't fix the problem

The code is used in a HTML document, where when you press a button the first word in every sentence gets marked in bold
This is my code:
var i = 0;
while(i < restOftext.length) {
if (text[i] === ".") {
var space = text.indexOf(" ", i + 2);
var tekststykke = text.slice(i + 2, space);
var text = text.slice(0, i) + "<b>" + tekststykke + "</b>" + text.slice(i + (tekststykke.length + 2));
var period = text.replace(/<b>/g, ". <b>");
var text2 = "<b>" + firstWord + "</b>" + period.slice(space1);
i++
}
}
document.getElementById("firstWordBold").innerHTML = text2;
}
It's in the first part of the code under function firstWordBold(); where it says there is an error with
var space1 = text.indexOf(" ");

Looks like you're missing a closing quote on your string, at least in the example you provided in the question.
Your problem is the scope of the text variable. In firstWordBold change every text to this.text, except the last two where you re-define text
Also, if you want to apply bold to the first word this is easier...
document.getElementById('test-div-2').innerHTML = '<b>' + firstWord + '</b>' + restOftext;
It now works for me, with no errors and it applies bold to the first word.
Here's how the function ended up,
function firstWordBold() {
console.log('bolding!');
var space1 = this.text.indexOf(' ');
var firstWord = this.text.slice(0, space1);
var restOftext = this.text.slice(space1);
document.getElementById('test-div-2').innerHTML = '<b>' + firstWord + '</b>' + restOftext;
}
To make every first word bold, try this...
function firstWordBold() {
let newHTML = '';
const sentences = this.text.split('.');
for (let sentence of sentences) {
sentence = sentence.trim();
var space1 = sentence.indexOf(' ');
var firstWord = sentence.slice(0, space1);
var restOftext = sentence.slice(space1);
newHTML += '<b>' + firstWord + '</b>' + restOftext + ' ';
}
document.getElementById('test-div-2').innerHTML = newHTML;
}
One last edit, I didn't notice you had sentences ending with anything other that a period before. To split on multiple delimiters use a regex, like so,
const sentences = this.text.split(/(?<=[.?!])\s/);

trim whitespace and from a javascript string

I am trying to trim all whitespaces from a string, including
I can't seem to achieve this.
The example I have tried was:
var txt = ' hallo<span> again</span> &nbsp ';
txt = txt.replace(/(?:^(?: )+)|(?:(?: )+$)/ig,'');
txt = txt.trim();
console.log(txt);//should only display 'hallo<span> again</span>'
Basically I want the output only to be hallo<span> again</span> from the string.

You can create a element say, textarea and assign the value there so that the special characters are decoded and then use trim() on that value:
var txt = ' hallo<span> again</span> &nbsp ';
var elem = document.createElement("textarea");
elem.innerHTML = txt;
var txtValue = elem.value;
txt = txtValue.trim();
console.log(txt);

var txt = ' hallo &nbsp ';
txt = txt.replace(/^(?: |\s)+|(?: |\s)+$/ig,'');
console.log(txt);//should only display 'hallo'
This'll do the trick, but since the input text contains a &nbsp without a semicolon behind it, the output is "hallo &nbsp"
For input ' hallo ' the output will be hallo

You can convert the into hard spaces (U+00A0), then trim:
var txt = ' hallo<span> again</span> &nbsp ';
txt = txt.replace(/&nbsp(?:;?)/ig,'\u00A0');
txt = txt.trim();
console.log('"' + txt + '"');//should only display 'hallo'
Note that since you had &nbsp (without ;) in there, I made the ; optional in the regular expression.

Knowing I'm late to the party, here's my contribution.
Used a Non Capturing Group "?:" and replaced all of them with an empty string "".
How it works:
(?:&nbsp|;|\s+)
?: non-capturing group, doesn't match everything in a group ()
&nbsp|;|\s+, &nbsp or ; or
\s+ matches unlimited amount of whitespaces.
let regex = /(?:&nbsp|;|\s+)/gm;
//let str = ` hallo &nbsp `;
let str = ` hallo<span> again</span> &nbsp `;
console.log(str.replace(regex, ""));

var txt = ' hallo ';
var reg = new RegExp(" ", "g"); // By RegExp constructor creating regular expression object for matching text with a pattern. and "g" is used from global i.e. apply on every match.
var result = txt.replace(reg, " ");
console.log(result.trim());
//2nd Method
var txt = ' hallo ';
var reg = new RegExp("[ |' ']", "g");
var result = txt.replace(reg, "");
console.log(result);

RegEx Search & Heighlight using jQuery/JavaScript

What I am looking for:
When I search for "em" in my search field it should highlight only containing "Em" at starting of any word. And when I search for "Em*" in my search it should highlight "Empty, Emailing, Email" etc.
now that working with my code but not in single sentence or 'p' tag. It only works with different 'p' or 'div' or line though I added "gim" in RegEx and case insensitive also doesn't work ether. Here is my code working sample: http://jsfiddle.net/rameshbaddi/3w3tw/15/
var searchPattern2 = new RegExp("(" + searchTerm + ")", "gmi");
for (var i = 0; i < strArray.length; i++) {
if (strArray[i].match(searchPattern2)) {
var replaceValue2 = "<span class='" + highlightClass + "'>" + searchTerm + "</span>";
alert(searchPattern2);
var tempNode2 = document.createElement('span');
tempNode2.innerHTML = node.nodeValue.replace(searchTerm, replaceValue2);
node.parentNode.replaceChild(tempNode2, node);
}
}
}

How to reference found matches?

I'm having a small problem with a regexp pattern. I don't have regexp knowledge, so I couldn't solve it.
I have this text:
var text = "this (is) some (ran)dom text";
and I want to capture anything between (). So after following this tutorial I came up with this pattern:
var re = /(\(\w*\))/g;
which works fine. But what I want to do now is replace the found matches, or rather modify. I want to wrap the found matches with a span tag. So I used this code:
var spanOpen = '<span style="color: silver;">';
var spanClose = '</span>';
text.replace(re, spanOpen + text.match(re) + spanClose);
even though the code works, I don't get the result I want. It outputs:
as HTML
this <span style="color: silver;">(is),(ran)</span> some <span style="color: silver;">(is),(ran)</span>dom text
as text
this (is),(ran) some (is),(ran)dom text
You can check the example in fiddle. How can I fix this?
The code in fiddle:
var text = "this (is) some (ran)dom text";
var re = /(\(\w*\))/g;
var spanOpen = '<span style="color: silver;">';
var spanClose = '</span>';
var original = "original: " + text + "<br>";
var desired = "desired: this " +spanOpen+"(is)"+spanClose+ " some " +spanOpen+"(ran)"+spanClose+ "dom text<br>";
var output = "output: " + text.replace(re, spanOpen + text.match(re) + spanClose);
var result = original + desired + output;
document.body.innerHTML = result;
If the title is wrong or misleading, I'll change it.

The .replace() method can take a function as the 2nd parameter. That will come in handy here.
var output = "output: " + text.replace(re, function(match){
return spanOpen + match + spanClose
});
The function will be called for each individual match.
You can also use '$&' in your replace string to reference each match
var output = "output: " + text.replace(re, spanOpen + '$&' + spanClose);
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

text.match(re) is returning an array of the result, so what you can do is loop this array and replace your string with each items, like this:
var matches = text.match(re);
var output = "output: " + text;
for (var i = 0; i < matches.length; i++)
{
output = output.replace(matches[i], spanOpen + matches[i] + spanClose);
}
See this FIDDLE

Why won't replace work with my regex object when test does?

I feel silly asking this because I'm betting the answer is staring right at me but here goes.
I'm taking a string from the CSS style textDecoration and trying to remove the underline portion of the string (and any whitespace around it). It returns true when I run test() but when I do the replace method the string is unaltered. Help?
My code:
textDecoration = function(str) {
var n_str = str + '|/\s' + str + '|/\s' + str + '/\s|' + str + '/\s';
var nre = new RegExp(n_str, "g");
debug_log('Found or not: ' + nre.test(txt));
txt.replace(nre, '');
debug_log('Result: ' + txt);
debug_log('-----------------------');
}
var txt = "underline";
debug_log('-----------------------');
debug_log('Starting String: ' + txt);
textDecoration("underline");
txt = "underline overline line-through";
debug_log('-----------------------');
debug_log('Starting String: ' + txt);
textDecoration("underline");
txt = "overline underline line-through";
debug_log('-----------------------');
debug_log('Starting String: ' + txt);
textDecoration("underline");
txt = "overline line-through underline";
debug_log('-----------------------');
debug_log('Starting String: ' + txt);
textDecoration("underline");
Output:

replace() returns a new string with the replaces and don't change the actual string. You should do something like:
var newString = txt.replace(nre, '');
debug_log('Result: ' + newString);

test returns a boolean. replace returns a new string. It does not alter the string.
Also, your regular expression is quite odd. Applying str = "underline", you will get:
/underline|\/sunderline|\/sunderline\/s|underline\/s/
which does not match whitespaces, but "/s".