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

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

本文关键字：设置 一部分 文本 javascript 使用 文件      更新时间：2023-09-26

我用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");
}

但是他们都不起作用，请建议我通过此链接引用了上述示例：Html使文本可点击而不使其成为超链接

这里只有几点不对劲。
首先，在文档就绪时执行此代码：

$(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");
});

演示

这是通过使用 jQuery 库和 ready snippet ：contains s 来完成的。以下是您需要的代码：

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
});

您可以在此处查看有关此代码段的更多信息。

相关文章：