-2

I am creating function in which I will pass String and Specific text.The specific text should be bold in whole string. I want to achieve this but unable do that.

Input string:-"Hi Hello boy Hello Shyam Hello"

Text :- Hello.

Output:- Hello word should looks bold in String.

Yevhen Horbunkov
  • 14,965
  • 3
  • 20
  • 42
Sharad kumar
  • 187
  • 2
  • 14
  • 2
    You tagged Reactjs, it is related? Do you have a concrete example? Are you referring to vanilla javascript? What have you tried? Share some code. – Dennis Vash Jul 01 '20 at 10:55
  • you can try this - https://www.w3schools.com/jsref/jsref_bold.asp – Raj Jul 01 '20 at 10:57
  • I approved the suggested edit for removing the ReactJS tag because it didn't look related; feel free to restore it if you feel necessary. – Al.G. Jul 01 '20 at 12:07
  • to all the `RegExp` based approaches ... is anyone aware of that the provided search string might contain whitespace sequences(of different length) and characters that are regexp-control characters itself (thus they need to be escaped before feeding them to the `RegExp` function/constructor). Also the text this search string is supposed to match might contain whitespace sequence(s) of unknown length (thus text content needs to be sanitized before as well). – Peter Seliger Jul 01 '20 at 13:03

3 Answers3

3

I'd do it like this:

function escapeRegExp(text) {
  return text.replace(/[-[\]{}()*+?.,\\^$|#\\s]/g, '\\$&');
}

function boldMe(input, text){
    const regExString = escapeRegExp(text)
    const regex = new RegExp(regExString, 'g');
    let output = input.replace(regex, `<b>${text}</b>`);
    console.log(output);
    return output;
}

var myDev = document.getElementById('myDiv');
myDev.innerHTML = boldMe(myDev.innerHTML,'Hello');
<div id="myDiv">Hi Hello boy Hello Shyam Hello</div>

Edit:

As @Peter Seliger pointed out in the comments, since working with regex, the search string has to be escaped before being used. I used this approach, but feel free to use any other escaping implementation

Argee
  • 1,216
  • 1
  • 12
  • 22
  • Hi Hello boy Hello......I am getting this. not rendering..why?? – Sharad kumar Jul 01 '20 at 11:18
  • where and how do you render it? can you show the code? – Argee Jul 01 '20 at 11:21
  • Hi Hello boy Hello......I am getting this instead of bold the text. – Sharad kumar Jul 01 '20 at 11:29
  • yes, but how are you writing it back in the DOM? you need to use the `.innerHTML` property... that's why I ask you how do you render it, so the code you use to display the string – Argee Jul 01 '20 at 11:41
  • ... regarding to what I was commenting on the OP's post ... a simple string like ... *Hi Hello boy hello Shyam Hello (Hello)* ... where one just wants to highlight the `(Hello)` (alltogether with its parenthesis) does result in something like this ... *Hi (**Hello**) boy hello Shyam (**Hello**) ((**Hello**))*. – Peter Seliger Jul 01 '20 at 13:15
  • @PeterSeliger good catch, I updated the answer for future reference – Argee Jul 01 '20 at 13:55
0

function boldString (fString, bString) {
 
  let regex = new RegExp(bString, 'g');

  return fString.replace(regex, `<b>${bString}</b>`);  
}

let output = boldString("Hi Hello boy Hello Shyam Hello", "Hello");

console.log(output);

document.body.innerHTML = output;
itsmepvr
  • 36
  • 3
-1
<span id="boldit">Bold me</span>

<script>
  function boldme() {
    document.getElementById('boldit').style.fontWeight = 'bold';
  }
  boldme();
</script>
leopal
  • 4,711
  • 1
  • 25
  • 35
rajanbhadauria
  • 445
  • 4
  • 11