Find and replace multiple words in HTML-CodePudding

I have multiple HTML files with numbered paragraphs. Without CSS, I'm looking for a way to add bold to the numbers.

I tried with jQuery adding this option:

$(document).html(html.replace("1", "<strong>1</strong>"))

but each file has 50 numbers. How can I do it for all of them?

The HTML file is like this:

<div id="content">1 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. . <br />
2 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. . <br />
3 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. . <br />

CodePudding user response：

You could use regular expressions with replace to accomplish this, like the snippet below.

Quick breakdown of the /([0-9])/g query:

The beginning and ending slashes without quotation marks indicate that we're using replace with a regex statement
The g at the end means we're looking for the query globally instead of just once
The parentheses indicates we're searching for regex groups, which allows us to include them in the replacement like $1, $2, etc (but we only need the first one since we have one group)
We're looking for only numeric characters, [0-9]

$('#content').html($('#content').html().replace(/([0-9])/g, "<strong>$1</strong>"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  1 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. . <br /> 
  2 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. <br /> 
  3 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. <br /> 
  50 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin.
</div>

CodePudding user response：

You could use replaceAll().

\d searches for all digits, and $& is the match.

jQuery

$('#content').html($('#content').html().replaceAll(/\d/g, '<strong>$&</strong>'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">1 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. . <br /> 2 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis
  nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. . <br /> 3 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit
  at mauris molestie, tempus tristique eros sollicitudin. . <br />
</div>

Vanilla JS

const content = document.getElementById('content');
content.innerHTML = content.innerHTML.replaceAll(/\d/g, '<strong>$&</strong>');

<div id="content">1 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. . <br /> 2 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis
  nulla tempus. Duis hendrerit velit at mauris molestie, tempus tristique eros sollicitudin. . <br /> 3 Lorem ipsum pain sit amet, consectetur adipiscing elit. Suspendisse egestas tortor non elit finibus, nec iaculis nulla tempus. Duis hendrerit velit
  at mauris molestie, tempus tristique eros sollicitudin. . <br />
</div>

CodePudding user response：

change the string replace using javascript

html content useing del or ins elements var str = "JavaScript replace method test"; var res = str.replace("test", "success");