使用 javascript 将上传的文本文件的一部分设为可点击

Question

我使用 javascript 上传了一个文件。我想使文本文件的某些部分突出显示并可单击。例如：我想让上传文件中的所有 "hello" 都可以点击并突出显示。

我可以突出显示文本，因为我使用了按钮标签并在 css 中更改了它的背景和边框属性，但是当单击按钮时我无法执行 onclick 操作。

我这样试过：

var sel_data=$("#sel").text(); // for taking the text file in avariable

var str='hello';

//making the regular expression of str
var re = new RegExp(str,"g");

//For replacing the 'str' by highlighted and clickable 'str'
var re_str="<button class='highlight' id='ty' onclick='alertfunc()' value="+str+">"+str+"</button>"

//replacement of 'str' by highlighted and clickable 'str'
var rep_data=sel_data.replace(re,re_str);
sel_data=rep_data;

//function to be executed when the button will get clicked
function alertfunc() {
    alert('yellow');
}

我也这样试过

var str='hello'


var re_str="<button class='highlight' id='ty'  value="+str+">"+str+"</button>" 

$(".highlight").click(function(){
     alert("yellow");
})

或者像这样

var button = document.getElementById("ty");
button.onclick = function(){
alert("yellow");
}

但是有none个可以用，请指教我通过这个link引用了上面的例子：Html make text clickable without making it a hyperlink

Answer 1

这是通过使用 jQuery 库和现成的代码段 :contains 完成的。这是您需要的代码：

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });

        });
    });
};

使用此代码段将使单词 "hello" 环绕在您选择的 class 范围内。

现在调用这个函数你需要做的就是：

$(".testHighlight *").highlight("hello", "highlight");

当然你必须设置 .testHighlight class 和 CSS 是这样的：

.testHighlight {
     background:yellow;
}

要使它们可点击，您可以使用 jQuery 轻松完成：

$(.testHighlight).click(function(){
//YOUR CODE HERE
});

您可以查看此代码段的更多信息 here。

Answer 2

这里有一些错误。
首先，在文件就绪时执行此代码：

$(document).ready(function(){
    // code
});

然后，更新 DOM 中的实际 html :

//replacement of 'str' by highlighted and clickable 'str'
var rep_data=sel_data.replace(re,re_str);
sel_data=rep_data;
$("#sel").html(sel_data); // here

并为点击使用事件委托：

$("#sel").on('click', '.highlight', function(){
     alert("yellow");
});

demo

使用 javascript 将上传的文本文件的一部分设为可点击

Making a part of an uploaded text file as clickable using javascript

javascript

jquery

onclick

button

highlight