Javascript 方法或方法来获取字符串中的相邻字符

Question

尝试获取字符串中包含空格的相邻字符。左侧 3 个字符和右侧 3 个字符...

也许使用正则表达式和 JavaScript split() 来获取字符串中的相邻字符？

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

但缺少空格以及左侧 3 个字符和右侧 3 个字符...

有什么建议吗？

Answer 1

你尝试过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

Answer 2

我假设您正在寻找 indexOf 和 substr 的组合

，这是一个示例函数，它返回一个包含左、右和错误（如果有）的对象，

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

其输出

left: wo 
right:  fo
error: null

希望有所帮助（另外希望我理解您的问题！）

Answer 3

我在这里添加另一个答案，因为我相信我原来的答案确实回答了您的问题（如何获取相邻字符）。

但是，在您发布代码后，我看到您想创建一个放大镜。这有点不同，所以我重写了你的代码。

不同的原因是您需要使用鼠标悬停来获取单个字母，这意味着您必须将单个字母封装到标签中。发布的代码就是这样做的（本质上是代码的工作版本。）注意我没有弄乱你的可拖动。如果您对新问题的时间有疑问。

<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 和基本循环封装字符串，以及如何获取原始字符串、保留空格等。）

希望有所帮助！