Question

这是我运行代码时得到的输出：

[19:01:06] User: <a href="http://www.google.com" target="_blank" >http://www.google.com </a>

它不会创建仅显示href标记的链接。

这就是链接：

function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;

//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

return replacedText;

}

所以在教程聊天框中我将文本发送到firebase列表中：

text=linkify(text);
    myDataRef.push({timestamp: timestamp, name: name, text: text, emote: emote});

这就是显示部分的样子：

function displayChatMessage(timestamp, name, text, emote) {

        $('<div/>').text('['+timestamp+'] ').append($('<name/>').text(name+': ')).append($('<em/>').text(text)).appendTo($('#messagesDiv'));
}
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;

};

我试图插入其他html标签，但这也无法正常工作。整个代码都是基于教程聊天并从那里开始工作。

Answer 1

jQuery的.text（）转义HTML，使其显示为文本而不是呈现为HTML。聊天示例有意使用此功能，以避免HTML Script Injection。您可以通过将渲染代码更改为“

”来“修复”您的代码

$('<div/>').text('['+timestamp+'] ').append($('<name/>').text(name+': ')).append($('<em/>').html(text)).appendTo($('#messagesDiv'));

请注意使用.html（文本）而不是.text（文本）。 但这不安全。现在，任何使用聊天的人都可以输入<script src="http://mysite.com/my-malicious-javascript.js"></script>作为聊天消息的消息，其他人都会运行该javascript。

也许这个jQuery插件可能是一个更好的解决方案：https://github.com/uudashr/jquery-linkify（即以可能安全的方式在接收端进行链接（虽然我没有查看代码）。

从firebase检索时出现html标记问题

1 个答案: