CODEWITHSUNDEEP
javascript
Shivashriganesh Mahato
Shivashriganesh Mahato

Reputation: 572

Test for something in a string and then bolden it in Javascript

Suppose I have this string in a variable

var stringName = "There is the word cupcake in this string"

Acknowledging that the .bold() function makes a string bolden, how can I test that "cupcake" is in the string, and then apply .bold() whenever and wherever it is? I was thinking something like this:

if (stringName.indexOf("cupcake") !== -1) {
    stringName.substring(
        stringName.indexOf("cupcake"), 
        stringName.indexOf("cupcake")+"cupcake".length
    ).bold();
}

But this doesn't work. Any suggestions? Thanks in advance!

EDIT: Let me clear up some questions. So, I'm storing the string in an array inside an array inside an object because I have many strings to show on the webpage. I've set up a specific <div> to with an ID where I want the text to show. Each string inside of the nested array is added as a list tag to the inner HTML of the div. That's how the string is displayed as a text. I've tried each of your methods, but none seem to work.

EDIT: Here is the code for asimes' suggestion:

var infoShowingOnScreen = document.getElementById("infoShowing");
for (var i = 0; i < sectionArrays.publications[0].length; i++) {
    if (sectionArrays.publications[0][i].indexOf("cupcake") !== -1) {
        sectionArrays.publications[0][i] = sectionArrays.publications[0][i].replace(new RegExp("cupcake", "g"), "<b>cupcake</b>");
    }
    infoShowingOnScreen.innerHTML += "<li>" + sectionArrays.publications[0][i].toString() + "</li>";
}

sectionArrays is the object, publications is the array, and the code is accessing every element of the first element of that array. Each of those are strings.

Upvotes: 2

Views: 1270

Answers (3)

asimes
asimes

Reputation: 5986

Use replace and pass in a new RegExp to replace all occurrences of "cupcake":

var str = "There is the word cupcake in this string. Another cupcake word. For good measure, cupcake";
var result = str.replace(new RegExp("cupcake", "g"), "<b>cupcake</b>");
console.log(result);

Note that bold just returns a string with "<b>" and "</b>" around it. The output of the above code is:

"There is the word <b>cupcake</b> in this string. Another <b>cupcake</b> word. For good measure, <b>cupcake</b>"

Edit: I have posted a complete HTML / JavaScript example with a screen shot to show that this does indeed work. The problem you are facing must be elsewhere in your code

Complete code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example</title>
</head>
<body>
    <ul id="infoShowing"></ul>
    <script>
        var sectionArrays = {};
        sectionArrays.publications = [[
            "foo cupcake bar",
            "foo",
            "foo cupcake cupcake bar cupcake baz",
        ]];

        var infoShowingOnScreen = document.getElementById("infoShowing");
        for (var i = 0; i < sectionArrays.publications[0].length; i++) {
            // No need for this check
            //if (sectionArrays.publications[0][i].indexOf("cupcake") !== -1) {
                sectionArrays.publications[0][i] = sectionArrays.publications[0][i].replace(new RegExp("cupcake", "g"), "<b>cupcake</b>");
            //}

            // No need for toString(), sectionArrays.publications[0][i] is already a string
            infoShowingOnScreen.innerHTML += "<li>" + sectionArrays.publications[0][i] + "</li>";
        }
    </script>
</body>
</html>

Screenshot:

cupcake

Upvotes: 3

Downgoat
Downgoat

Reputation: 14371

.bold() is deprecated, you can write a quick and easy replacement using:

str.replace(/(cupcake)/g, "<b>$1</b>");

This will find all occurrences of cupcake, then add bold tags around it

Upvotes: 2

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

According to Mozilla bold() is deprecated. All it does is wrap a string in <b> tags so it's easy enough to create a function to do that without having to use bold(). Try this

function makeWordBold(string, target){

  // regex finds all occurences of target within string
  var regex       = new RegExp(target, 'g'),
      targetBold  = '<b>' + target + '</b>';

      // replace all occurences with text wrapped in bold tags
  return  string.replace(regex, targetBold);
}

var string      = 'foo cupcake bar cupcake baz.',
    target      = 'cupcake',
    boldString  = makeWordBold(string, target);

console.log(boldString); //  foo <b>cupcake</b> bar <b>cupcake</b> baz.

Upvotes: 1

Related Questions