Question

我正在使用tinymce库，我希望为我的用户在tinymce textarea中提供代码完成功能。

现在假设在我们的tinymce＆lt; textarea的＆GT;我们有一个html标签，其样式属性为空值，如下所示：

<div style="">
      <!-- Other codes-->
</div>

我创建了一个javascript事件处理程序，当用户按下CTRL + Space函数调用时。现在假设用户将他/她的光标放在style =＆＃34;＆＃34;双引号并按CTRL + SPACE

如何获取html属性名称＆＃34; style＆＃34;在我的JavaScript代码中？

Answer 1

你可以使用单词拆分和一些正则表达式来做到这一点。这可以给你一个起点：

获取光标位置。
获取光标位置的文字
仅匹配该文本中的字母（属性为字母）。

演示：http://jsfiddle.net/abhitalks/stepB/1/

但是，只有当属性值的值为空时（根据您的问题），这才有效。如果没有，您可能会寻找另一种匹配方式，但概念保持不变。

代码：

// handle an event
$("textarea").bind("click", function() {
    var $input = $(this),             // your textarea
        text = $input.val(),          // the entire text of the textarea
        sel = this.selectionStart,    // cursor position
        word = findWord(text, sel),   // get the specific word at cursor position
        tag = word.match(/[A-z]+/);   // match only alphabets from that word
    $("#result").text(tag);
});

// function to find the word at specific position
function findWord(text, position){
    var words = text.split(' '),      // split at spaces into array of words
        offset = 0,                   // track characters traversed
        i;                            // index counter

    for(i=0; i < words.length; i++){
        offset += words[i].length + 1; // keep character count
        if (offset > position) break;  // if next count exceeds position,
    }                                  // we found the word at current index
    return words[i]; 
}

希望有所帮助。

注意：selectionStart从IE9开始工作。 IE＆lt; IE不支持它。 9.如果您希望支持IE.Legacy，请在下面的评论中查看@Esko提出的链接。

在javascript事件上获取属性名称

1 个答案: