Question

我有一个输入文本框，它接受来自用户的句子，并在用户接受后使用正则表达式对其进行分割，并将每个标记化单词的div添加到表中。

我希望根据我在前面步骤中创建的div(s)启用可点击链接，按下键盘上的控制键并单击鼠标左键我要选择多个div(s)这个截图，因此得到所选单词的开始和结束索引，以及在该句子中选择的单词。

以下是我尝试的代码：

@{
    ViewData["Title"] = "Index";
}

<style>
    #editor {
        padding: 5px;
        border: solid green 1px;
    }
</style>


<h2>AnnotationView</h2>

<h2>Enter text to annotate</h2>

<input type="text" id="myInput" />
<button id="btnAddUtterance" class="btn btn-info">Add Utterance</button>

<table id="tblText" class="table table-hover">
    <thead>
        <tr>
            <th>Select</th>
            <th>User Utterance</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<button id='btnDeleteRow' class='btn btn-danger'>Delete Utterance</button>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $( function ()
    {
        $( '#btnAddUtterance' ).click( function ()
        {
            populateUtterance();
        } );

        function populateUtterance()
        {
            debugger;
            let userUtterance = $( '#myInput' ).val();
            let splittedUtterance = tokenizeUtterance( userUtterance );

            let markup = "<tr><td><input type='checkbox' name='record'></td><td name = 'utterance'>" + splittedUtterance + "</td></tr>";
            $( "#tblText tbody" ).append( markup );
            $( '#myInput' ).val( '' );
        }


        $( "#myInput" ).keyup( function ( event )
        {
            if ( event.keyCode === 13 )
            {
                populateUtterance();
            }
        } );


        function splitCharacters( utterance )
        {
            return utterance.split( '' );
        }

        function findSpacesIndex( utterance )
        {
            let index = 0;
            let spacesIndex = [];
            while ( ( index = utterance.indexOf( ' ', index + 1 ) ) > 0 )
            {
                spacesIndex.push( index );
            }
            return spacesIndex;
        }

        var lookUpObject = [];

        function tokenizeUtterance( utterance )
        {
            debugger;

            let spilittedUserText = utterance.toString().match( /[\w-']+|[^\w\s]+/g );
            let div = '';
            let wordStart = 0, wordEnd = 0;

            let spacesIndex = [];
            spacesIndex = findSpacesIndex( utterance );

            let splittedUtteranceChars = [];
            splittedUtteranceChars = splitCharacters( utterance );

            $.each( spilittedUserText, function ( index, item )
            {
                div += '<div style="display: inline-block;margin:5px;" class="spilittedDiv">' + item + '</div>';
            } );

            console.log( lookUpObject );

            return div;
        }


        $( document ).on( "click", "#tblText > tbody > tr > td:nth-child(2)", function ()
        {
            console.log( "Selected" );
        } );

        // Find and remove selected table rows
        $( document ).on( 'click', '#btnDeleteRow', function ( e )
        {
            $( "#tblText tbody" ).find( 'input[name="record"]' ).each( function ()
            {
                if ( $( this ).is( ":checked" ) )
                {
                    $( this ).parents( "tr" ).remove();
                }
            } );
        } );
    } );
</script>

以下是它现在的样子：

一个例子是用户输入如下句子： HELLO, WORLD这会给我一个关于分割div(s)的排序的输出。

<div>
<div> HELLO </div>
<div> , <div>
<div> WORLD </div>
</div>

我写了一个函数：

function tokenizeUtterance( utterance )
        {    
            let spilittedUserText = utterance.toString().match( /[\w-']+|[^\w\s]+/g );
            let div = '';
            let wordStart = 0, wordEnd = 0;

            let spacesIndex = [];
            spacesIndex = findSpacesIndex( utterance );

            let splittedUtteranceChars = [];
            splittedUtteranceChars = splitCharacters( utterance );

            $.each( spilittedUserText, function ( index, item )
            {
                div += '<div style="display: inline-block;margin:5px;" class="spilittedDiv">' + item + '</div>';
            } );

            return div;
        }

因此，如果用户选择范围从HELLO到WORLD的div，我应该得到以下类型的JSON对象：

{
    "start": 0,
    "end": 11,
    "value": "HELLO, WORLD"
}

如果用户选择单词HELLO和,，我必须获取JSON对象，如：

{
    "start": 0,
    "end": 5,
    "value": "HELLO,"
}

感谢任何帮助，谢谢。

Answer 1

我认为HTML data-* Attributes可以帮到你。

您只需要在start函数的相对div中嵌入每个单词的end和tokenizeUtterance() ndice，我的意思是：

对于单词Hello，div将是这样的：

<div style="display:inline-block;margin:5px;" 
     class="spilittedDiv" 
     id="divX"
     data-start="0" 
     data-end="4" 
     data-value="Hello">Hello
</div>

因此，要获得start，end和value，您需要将其添加到tokenizeUtterance()：

var wordIndex = 0;
$.each( spilittedUserText, function ( index, item ){

    divId = "div"+index;
    divStart = wordIndex;
    divEnd = wordIndex + item.length;
    divValue = item;
    div += '<div style="display:inline-block;margin:5px;"
            class="spilittedDiv"
            id="'+divId+'"
            data-start="'+divStart+'" 
            data-end="'+divEnd+'" 
            data-value="'+divValue+'"
            >' + item + '</div>';
    wordIndex = wordIndex + item.length;

});

之后，您可以使用以下方法获取这些数据：

var start = $("#divX").data("start");
var end = $("#divX").data("end");
var value = $("#divX").data("value");

如果用户选择了另一个div，您只需将var end设置为第二个div data-end：

end = $("#div2").data("end");
value = value + $("#div2").data("value");

在jQuery中获取句子的多个div的开始和结束索引

1 个答案: