Javascript способы или методы, чтобы получить соседние символы в строке - PullRequest
0 голосов
/ 04 ноября 2010

Попытка получить соседние символы в строке, включая пробелы.3 символа слева и 3 символа справа ...

возможно, используя регулярные выражения и JavaScript split (), чтобы получить соседние символы в строке?

var str   = "one two three four five",
array     = str.split("");

, но пропущены пробелы, 3 символа слева и 3 символа справа ...

есть предложения?

Ответы [ 3 ]

0 голосов
/ 04 ноября 2010

Я предполагаю, что вы ищете комбинацию indexOf и substr

Вот пример функции, которая возвращает объект, содержащий left, right и error (если есть)

    function findSurrounding(needle, haystack, leadingCharacters, trailingCharacters){
        var pos = haystack.indexOf(needle);
        var returnObject = {'left':'', 'right':'', 'error':null};

        //if needle was not found, output error
        if(pos == -1){
            returnObject.error = needle + ' could not be found!';

        //otherwise set "left" and "right"
        } else {
            returnObject.left = haystack.substr(pos - leadingCharacters, leadingCharacters);
            returnObject.right = haystack.substr(pos + needle.length, trailingCharacters);
        }
        return returnObject;
    }
    //get output:
    var surrounding = findSurrounding('three', 'one two three four five', 3, 3)
    //debug / write output
    for(prop in surrounding){
        document.write(prop+': '+surrounding[prop]+'<br/>');
    }

outputэто

left: wo 
right:  fo
error: null

Надеюсь, что это помогает (также надеюсь, что я понял ваш вопрос!)

0 голосов
/ 06 ноября 2010

Я добавляю еще один ответ здесь, потому что я считаю, что мой оригинальный ответ действительно отвечает на ваш вопрос, как указано (как получить соседние символы).

Однако после того, как вы опубликовали свой код, я вижу, что вы хотите создатьлупа.Это своего рода ловушка для рыбы, поэтому я переписал ваш код.

Причина в том, что он отличается тем, что вам нужно использовать указатель мыши для получения отдельных букв, а это означает, что вы должны заключать отдельные буквы в теги.Размещенный код делает это (по сути, рабочая версия вашего кода.) Обратите внимание, я не связывался с вашим перетаскиваемым объектом.Если у вас возникли проблемы с этим временем для нового вопроса.

<style type="text/css">
        body { font-family:"Tiresias PCfont Z"; /* font-size:15px; */ background: #fff; line-height:1.1em; }
        .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
        #draggable { margin-bottom:20px; }
        #MagDrag {background-image:url(controls/MagLens1.png); width: 236px; height: 73px; }
        #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; display:none;}
        #magnifyView { width: 90px;
            background-image:url(controls/MagLens1.png);width: 212px;height: 50px; white-space: nowrap; font-size: 40px; font-weight:bold;
        }
        .onText { color:#990000;}
    </style>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.java2s.com/Tutorial/JavaScriptDemo/js/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://www.java2s.com/Tutorial/JavaScriptDemo/js/ui/ui.draggable.js"></script>
    <script type="text/javascript" charset="utf-8">
        //custom "magnify" function
        var mag = function(){
            return {
                add: function(){
                    //encapsulate #article into individual spans
                    //why?  mouseover events are triggered by tags, not individual letters
                    var str = $('#article').text();
                    var output = '';
                    for(var i = 0; i<str.length; i++){
                        output += '<span>' + str.substr(i, 1) + '</span>';
                    }
                    //replace #article with altered html
                    $('#article').html(output);

                    //add the mouseover
                    $('#article span').mouseover(function(){
                        //note both these selectors could be way more efficient
                        //however this should get you started...
                        var leading = $(this).prev().add($(this).prev().prev()).add($(this).prev().prev().prev());
                        var trailing = $(this).next().add($(this).next().next()).add($(this).next().next().next());

                        $('#magnifyView').html(
                            $(leading).text() +
                            '<span class="onText">' + $(this).text() + '</span>' +
                            $(trailing).text()
                        );
                    });
                    $('#containment-wrapper').show();
                },
                remove: function(){
                    $('#article span').unbind('mouseover');
                    $('#article').html($('#article').text());
                    $('#containment-wrapper').hide();
                }
            }
        }();

        // jquery $ function load
        $(document).ready(function(){
            $('.addmag').click(function(){
                mag.add();
            });
            $('.removemag').click(function(){
                mag.remove();
            });
            $("#magnifyView").draggable({ containment: '#containment-wrapper', scroll: false, axis: 'x' });
        });
    </script>

Примечание. Чтобы добавить или удалить функцию лупы, вам нужно нажать «addmag» или «removemag».(Это сделано для того, чтобы продемонстрировать, как инкапсулировать строку с помощью jquery и основного цикла, а также как вернуть исходную строку, сохранить пробелы и т. Д.)

Надеюсь, что это поможет!

0 голосов
/ 04 ноября 2010

Вы пробовали подстроку JS

Примерно так

var str="Hello world!";
document.write(str.substring(3)+"<br />");
document.write(str.substring(3,7));

http://www.w3schools.com/jsref/jsref_substring.asp

Или что-то вроде поиска позиции

http://phpjs.org/functions/strpos:545

...