How can I replace characters with html tag? (enriching text)

Question

Text = "I have this text [b] and want this part to be bold [/b]."

How can i replace the [b] and [/b] with strong html tag

so that the output is => I have this text and want this part to be bold.

I tried using lodash replace like this but eslint is complaining for the closing tag:

let startTag = _.replace(text, '[b]', <strong>);
let endTag= _.replace(startTag, '[/b]', </strong>);

Since OP mentioned in comment of my answer that he was using react and jsx, it change the question a lot. I created a whole other Q&A about inspired by this one. Check this one if you are looking to output some bbcode in react: https://stackoverflow.com/questions/59629664/how-can-i-convert-bbcode-characters-to-jsx-enriching-text/59629665#59629665 — aloisdg, Jan 07 '20 at 13:48

aloisdg · Answer 1 · 2020-01-07T11:02:12.257

1

Can you try to wrap <strong> with quote '<strong>' (same for the closing tag).

let text = 'foo [b]bar[/b]';
let startTag = _.replace(text, '[b]', '<strong>');
let endTag = _.replace(startTag, '[/b]', '</strong>');
document.write(endTag);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

This markup look like BBCode. You may want to use an existing bbcode parser instead of building one. (check your favorite browser engine to find solution like Extendible-BBCode-Parser, js-bbcode-parser, node-bbcode, or even on Stack Overflow Convert BBcode to HTML using JavaScript/jQuery).

edited Jan 07 '20 at 11:02

answered Jan 07 '20 at 10:56

aloisdg

22,270
6
85
105

thanks but this will print the text with the tags: I have this text and want this part to be bold . Maybe is it because I'm working with jsx – Skoby Jan 07 '20 at 12:32
@Eskoby Add the tag jsx to your question. You never mentioned it until now. By the way, do you plan to support bbcode or only the `[b]` tag? – aloisdg Jan 07 '20 at 13:13

score 0 · Answer 2 · answered Jan 07 '20 at 11:05

0

If you don't want to use loadash then do like below.

var text = "I have this text [b] and want this part to be bold [/b]."
var openedTag = text.replace("[b]", "<strong>");
var closedTag = openedTag.replace("[/b]", "</strong>");
document.write(closedTag)

answered Jan 07 '20 at 11:05

Pushprajsinh Chudasama

7,772
4
20
43

same issue like i commented above...the tag is not being interpreted – Skoby Jan 07 '20 at 12:34

score 0 · Accepted Answer · answered Jan 07 '20 at 11:46

0

Simplest solution in java-script looks like this:

var str = 'I have this text [b] and want this part to be bold [/b].';
str = str.replace(/\[b\](.*?)\[\/b\]/ig, '<strong>$1</strong>');
console.log(str);

answered Jan 07 '20 at 11:46

Koushik Basu

38
7

not working for me...eslint is complaining regarding the redundant character escape. – Skoby Jan 07 '20 at 12:36
ignoring the redundant character escape, it will print the text without interpreting the tag – Skoby Jan 07 '20 at 12:45
function main(str) { str = str.replace(/\[b\](.*?)\[\/b\]/ig, '$1'); return str; } var str = 'I have this text [b] and want this part to be bold [/b].'; main(str); I checked with JShint.com and it shows no error or warning :- There is only one function in this file. It takes one argument. This function contains 2 statements. Cyclomatic complexity number for this function is 1. – Koushik Basu Jan 08 '20 at 04:44

How can I replace characters with html tag? (enriching text)

3 Answers3