Question

我使用javascript上传了一个文件。我想使文本文件的某些部分突出显示，也可以点击。例如：我想在上传的文件中将所有“你好”作为可点击和突出显示。

我可以突出显示文本，因为我使用了按钮标签并在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");
}

但是他们都没有工作，请建议我通过以下链接引用了上述示例：Html make text clickable without making it a hyperlink

Answer 1

这里只有一些问题首先，在文档就绪上执行此代码：

$(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

Answer 2

这是通过使用jQuery库和ready片段：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”字样包含在您选择的类别的范围内。

现在要调用此函数，您需要做的就是：

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

当然，您必须使用CSS设置.testHighlight类：

.testHighlight {
     background:yellow;
}

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

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

您可以在此代码段here上查看更多内容。

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

2 个答案: