javascript - 根据匹配条件在连接字符串中换行并添加换行符

Question

我通过以下格式的 API 调用从 DB 获取动态文本

Test 1<br>Test 2<br>Test 3

如何在有“br”标签的地方打破这个字符串并添加换行符？我需要以以下格式显示字符串

Test 1
Test 2
Test 3

有人可以阐明一下。
更新:尝试下面的代码，正在添加空间而不是新行

gridData.STATUSNOTES = gridData.STATUSNOTES.replaceAll('<br>', '\n');

Answer 1

使用“br”
您可以使用 innerHTML 简单地附加文本，例如:

var content = "Test 1<br>Test 2<br>Test 3"
document.getElementById("result").innerHTML = content

<div id="result"></div>

使用“div”
如果它不起作用，无论如何父元素不允许，您可以使用div或任何带有 display 的元素属性为 block因为 block 级元素总是从新行开始，并且总是占据可用的全部宽度。这是一个将字符串转换为新行的示例:

var content = "Test 1<br>Test 2<br>Test 3"
var result = "";
content.split("<br>").map(element => result += `<div>${element}</div>`)
document.getElementById("result").innerHTML = result

<div id="result"></div>

UPDATE 使用“\n”作为建议，OP 没有提供这是否是 HTML
要对 HTML 不执行任何操作，只需在文本中添加换行符，您可以替换所有 br与 \n

const content = 'Test 1<br>Test 2<br>Test 3'.replaceAll('<br>', '\n');
console.log(content);

使用 CSS 更新 2
如果您想使用 \n作为换行的东西，也许你可以使用 CSS 样式 white-space: pre-line .这是一种使用 \n 换行的 CSS 方式.希望这可以帮助。

var content = "Test 1<br>Test 2<br>Test 3".replaceAll("<br>","\n")
document.getElementById("result").innerHTML = content

<div id="result" style="white-space: pre-line;"></div>